<template>
	<div>
		<div class="main active-index">
			<div class="active-index-wrap">
				
			
			<div class="panel panel1 pull-left">
				<div class="panel-head">
					<h1>星辰知识问答</h1>
					<p>活动时间：3月29日-3月31日</p>
				</div>
				<div class="panel-body">
					<p>活动规则：活动期每日一次答题机会，<br>每次10题答对6题以上获得抽奖机会</p>
					<p>活动奖励：神兽魂*80、精灵珍魂、<br>+12强化保护券等
</p>

					<p @click='touch(1)'>
						<a href="javascript:;" class="btn btn-answer"></a>
						<!--<router-link class="btn btn-answer"></router-link>-->
					</p>
				</div>
			</div>
			<div class="panel  panel2  pull-right">
				<div class="panel-head">
					<h1>百万K钻邀你体验</h1>
					<p>活动时间：3月29日-4月4日</p>
				</div>
				<div class="panel-body">
					<p style="padding-left: 0.75rem;">活动奖励：参与即送20K钻</p>

					<p @click='touch(2)'>
						<a :href="link1" class="btn btn-join"></a>
						<!--<router-link class="btn btn-answer"></router-link>-->
					</p>
				</div>
			</div>
			<div class="panel  panel3  pull-left">
				<div class="panel-head">
					<h1>
						星辰奇缘宝物系统专属礼包
</h1>
					<p>礼包有效期：3月29日-4月4日</p>
				</div>
				<div class="panel-body" @click='touch(3)'>
					<!--<a :href="link2" class="flyTxt"></a>-->
					<!--<img class="libao" src="../img/p3-text-bg.png"/>-->
					<p @click='touch(3)'>
						<a :href="link2" class="btn btn-get"></a>
						<!--<router-link class="btn btn-answer"></router-link>-->
					</p>
				</div>
			</div>
			<p class="copyRight">
				本活动解释权归3K游戏所有
			</p>
			</div>
		</div>
		<transition name="fade">
			<div class="superbox" :class="{'show':showBox}">
				<prompt father-component="home" v-if='this.$store.state.box.prompt'></prompt>
				<a href="javascript:;" class="logo" v-if='this.$store.state.box.loading'></a>
				<div class="closeBig" @click="closeBox"></div>
			</div>
		</transition>
	</div>
</template>

<script>
	import prompt from '../components/prompt.vue'
	import Api from '../js/lib/Api'
	import FN from '../js/lib/fn'
	let isAndroid = /android/i.test(navigator.userAgent.toLowerCase());
	let params = FN.getUrlParams();
	export default {
		name: 'home',
		data() {
			return {
				link1:'http://wechat.3k.com/bbs/act/1/326265?from_id=' + params.from_id || '',
				link2:'http://wechat.3k.com/welfare/list/1?from_id=' + params.from_id || '',
				showBox: false,
				changeBox(name){
					this.showBox = true;
					this.$store.dispatch("changeBox", name);
					document.querySelector("body").className = 'noScroll'
				}
			}
		},
		components: {
			prompt
		},
		methods: {
			async touch(id){
				this.$store.dispatch('activityTime').then(res =>{
					//活动未开始 或者 已经结束
					if(this.$store.state.activityType == 0) {
						return this.changeBox("prompt")
//						return false;
					} else {
						if(id==1){
							this.$router.push({path:'sub',query: { from_id: params.from_id || '' }});
						}
					}
				});
				this.$store.dispatch("clickCount", { id });
			},
			closeBox() {
				this.showBox = false;
				this.$store.dispatch("initBox");
				document.querySelector("body").className = ''
			},
			async clickCount(id) {
				this.$store.dispatch("clickCount", { id });
			},
			
		},
		async created() {
			document.querySelector("body").className = ''
		}
	}
</script>

<style lang="less" scoped>
	@import "../css/_modules.less";
	.libao {
		.wh(470,189);
	}
	
	.closeBig {
		position: absolute;
		.abCenter(55, 55);
	    /*margin-top: -2.9rem;*/
        margin-top: -2.6rem;
    	margin-left: 1.76rem;
		.bg();
		background-image: url(../img/closeBig.png);
	}
	.pull-left {
		float: left;
	}
	
	.pull-right {
		float: right;
	}
	.active-index-wrap {
		width: 7.5rem;
		margin: 0 auto;		
	}
	.active-index {
		margin: 0 auto;
		padding-top: 6.8rem;
		background: url(../img/bg-1.jpg) center top no-repeat;
	    background-color: #4fbfff;
		.background-size(7.5rem auto);
		.g-clr();
		.panel-head {
			height: .89rem;
			padding-left: .77rem;
			p {
				margin-top: .02rem;
				font-size: .2rem
			}
		}
		.panel1 {
			margin-left: .92rem;
			.panel-head {
				background: url(../img/icon-p1.png) left center no-repeat;
				background-size: .67rem;
			}
		}
		.panel2 {
			margin-top: 1.36rem;
			margin-right: .82rem;
			.panel-head {
				background: url(../img/icon-p2.png) left center no-repeat;
				background-size: .67rem;
			}
		}
		.panel3 {
			margin-top: 1rem;
			margin-left: .92rem;
			.panel-head {
				background: url(../img/icon-p3.png) left center no-repeat;
				background-size: .67rem;
			}
		}
		.panel-body {
		    min-height: 2.2rem;
			margin-left: .02rem;
			position: relative;
			p {
			    line-height: 0.4rem;
				font-size: .24rem;
				margin-top: .18rem;
			}
			.btn {
				width: 2.71rem;
				height: .65rem;
				margin-top: .22rem;
				display: inline-block;
			}
			.btn-answer {
				background: url(../img/btn-answer.png) center center no-repeat;
				background-size: 100% 100%;
			}
			.btn-join {
				background: url(../img/btn-join.png) center center no-repeat;
				background-size: 100% 100%;
			}
			.btn-get {
				background: url(../img/btn-get.png) center center no-repeat;
				background-size: 100% 100%;
			}
			
			.flyTxt {
				position: absolute;
			    width: 4.7rem;
		    	text-align: center;
	    	    margin-top: 0.2rem;
	    	    line-height: 1.5rem;
	    	    font-size: 0.25rem;
	    	    color: #fff;
			}
		}
		.copyRight {
			/*padding: 0.4rem 0 0;*/
			text-align: center;
			clear: both;
		}
		h1 {
			color: #fff;
			font-size: .32rem
		}
		p {
			color: #fff
		}
	}
</style>